<template>
  <div>
    <el-row>
      <el-col :span="4"
        ><el-select
          v-model="fundCode"
          placeholder="请选择"
          @change="getFundStatistics"
        >
          <el-option
            v-for="item in fundNameList"
            :key="item.code"
            :label="item.fundName"
            :value="item.code"
          >
          </el-option> </el-select
      ></el-col>
      <el-col :span="22">
        <div id="fundChart" ref="fundChart" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstane: '',
      fundList: [],
      fundNameList: [],
      fundCode: '招商白酒'
    }
  },
  mounted() {
    this.getGroupOfFund()
    this.getFundStatistics(1)
  },
  methods: {
    initLineChart() {
      this.chartInstane = this.$echarts.init(this.$refs.fundChart)
      const initOption = {
        grid: {
          left: '3%',
          top: '35%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 20,
          top: '20%',
          icon: 'circle'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        }
      }
      this.chartInstane.setOption(initOption)
      this.updateChart()
    },

    async getFundStatistics(row) {
      const userId = window.sessionStorage.getItem('token')
      const { data: res } = await this.$http.get(
        '/home/getFundStatistics?userId=' + userId + '&fundCode=' + row
      )
      console.log(res)
      if (res.code !== 1) {
        return this.$message.error('获取基金失败！')
      }
      this.fundList = res.data

      this.initLineChart()
    },

    async getGroupOfFund() {
      const userId = window.sessionStorage.getItem('token')
      const { data: res } = await this.$http.get(
        '/home/getGroupOfFund?userId=' + userId
      )
      if (res.code !== 1) {
        return this.$message.error('获取基金异常')
      }
      this.fundNameList = res.data
      console.log(this.fundNameList)
    },

    updateChart() {
      // 半透明的颜色值
      const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)'
      ]
      // 全透明的颜色值
      const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)'
      ]
      // 处理数据
      // 类目轴的数据
      const timeArr = this.fundList.xaxis
      // y轴的数据 series下的数据
      const valueArr = this.fundList.yaxis

      const seriesArr = {
        name: valueArr.fundName,
        type: 'line',
        data: valueArr.yvalues,
        smooth: true,
        // stack: this.choiceType,
        label: {
          show: true,
          position: 'top',
          textStyle: {
            color: 'black',
            fontSize: 10
          }
        },
        areaStyle: {
          color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              // color: colorArr1[index]
              color: colorArr1[1]
            }, // %0的颜色值
            {
              offset: 1,
              // color: colorArr2[index]
              color: colorArr2[1]
            } // 100%的颜色值
          ])
        },
        lineStyle: {
          normal: {
            color: '#16f2d9'
          }
        },
        itemStyle: {
          normal: {
            color: '#16f2d9'
          }
        }
      }

      const legendArr = []
      legendArr.push(valueArr.fundName)
      const dataOption = {
        xAxis: {
          data: timeArr
        },
        legend: {
          data: legendArr
        },
        series: seriesArr
      }
      this.chartInstane.setOption(dataOption)
    }
  }
}
</script>

<style scoped>
#fundChart {
  width: 500px;
  height: 400px;
  margin-top: -50px;
}
.el-select {
  z-index: 1;
}
</style>
